Skip to content

Conversation

Kitenite
Copy link
Contributor

@Kitenite Kitenite commented Oct 6, 2025

Description

Related Issues

Type of Change

  • Bug fix
  • New feature
  • Documentation
  • Refactor
  • Other (please describe):

Testing

Screenshots (if applicable)

Additional Notes


Important

compressImageInBrowser in image.ts updated for more aggressive image compression with new default settings and optional configuration.

  • Behavior:
    • compressImageInBrowser in image.ts now uses more aggressive default compression options: maxSizeMB reduced to 0.2, maxWidthOrHeight reduced to 512, and quality set to 0.6.
    • Automatically compresses images with stricter limits for faster uploads and reduced bandwidth.
  • Configuration:
    • Added optional compressionOptions parameter to compressImageInBrowser for flexible tuning of compression settings.

This description was created by Ellipsis for cbc3f98. You can customize this summary. It will automatically update as commits are pushed.


Summary by CodeRabbit

  • New Features
    • Improved image handling in chat: dropped or pasted images are now automatically compressed with stricter limits on size and dimensions for faster uploads and reduced bandwidth.
    • Delivers more consistent image quality while keeping files lightweight, improving performance and responsiveness in the chat panel.
  • Chores
    • Added configuration support for image compression, enabling flexible tuning of size, dimensions, and quality for future adjustments without impacting existing workflows.

Copy link

vercel bot commented Oct 6, 2025

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Preview Comments Updated (UTC)
docs Ready Ready Preview Comment Oct 6, 2025 7:19pm
web Ready Ready Preview Comment Oct 6, 2025 7:19pm

Copy link

supabase bot commented Oct 6, 2025

This pull request has been ignored for the connected project wowaemfasoptxrdjhilu because there are no changes detected in apps/backend/supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.


Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.

Copy link

coderabbitai bot commented Oct 6, 2025

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

Walkthrough

Added optional compression options to the in-browser image compression utility and updated the chat input to call it with specific constraints (size, dimensions, quality).

Changes

Cohort / File(s) Summary
Image compression utility
packages/utility/src/image.ts
compressImageInBrowser now accepts an optional compressionOptions object (maxSizeMB, maxWidthOrHeight, quality). Merges provided options with previous defaults (2 MB, 2048 px). Function signature updated accordingly; processing and error handling unchanged.
Web chat input integration
apps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/chat-input/index.tsx
Updated calls to compressImageInBrowser to pass explicit options: maxSizeMB: 0.2, maxWidthOrHeight: 512, quality: 0.6.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor U as User
  participant CI as ChatInput (Web)
  participant IU as Image Utility

  U->>CI: Drop/Paste image file
  CI->>IU: compressImageInBrowser(file, {maxSizeMB:0.2, maxWidthOrHeight:512, quality:0.6})
  Note right of IU: Merge options with defaults<br/>Perform compression
  IU-->>CI: Compressed image (Blob/File) or error
  CI-->>U: Proceed with upload/send or show error
Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

A nibble of bytes, a squeeze so slight,
I thump my paws—your pixels light!
From lofty megs to tidy crumbs,
I crunch and hush the heavy hums.
Hippity-hop, your images slim—
Pack light, ship fast, now trim and prim.

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)
Check name Status Explanation Resolution
Description Check ⚠️ Warning The pull request description includes the required template headings but all sections are left empty without any summary of changes, related issue links, type of change selections, or testing details, making it largely incomplete. Please populate each template section by writing a concise description of the changes, linking related issue(s), selecting the appropriate type(s) of change, outlining the tests or steps used to verify your work, and adding screenshots or additional context where applicable.
✅ Passed checks (2 passed)
Check name Status Explanation
Title Check ✅ Passed The title clearly states the primary change to the code, namely making the image compression more aggressive, and does so in a concise format without extraneous details or noise.
Docstring Coverage ✅ Passed Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.
✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch feat/aggressive-image-compression

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Comment on lines +16 to +18
maxSizeMB: compressionOptions?.maxSizeMB ?? 0.2,
maxWidthOrHeight: compressionOptions?.maxWidthOrHeight ?? 512,
quality: compressionOptions?.quality ?? 0.6,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There appears to be a discrepancy between the PR description and implementation. The PR description states that the default compression values should be:

  • maxSizeMB: 2
  • maxWidthOrHeight: 2048
  • quality: 0.8

However, the implementation sets more aggressive defaults:

  • maxSizeMB: 0.2
  • maxWidthOrHeight: 512
  • quality: 0.6

These more aggressive defaults will result in smaller file sizes but potentially lower image quality than what was specified in the PR description. Consider aligning the implementation with the documented defaults to ensure consistent behavior.

Suggested change
maxSizeMB: compressionOptions?.maxSizeMB ?? 0.2,
maxWidthOrHeight: compressionOptions?.maxWidthOrHeight ?? 512,
quality: compressionOptions?.quality ?? 0.6,
maxSizeMB: compressionOptions?.maxSizeMB ?? 2,
maxWidthOrHeight: compressionOptions?.maxWidthOrHeight ?? 2048,
quality: compressionOptions?.quality ?? 0.8,

Spotted by Diamond

Fix in Graphite


Is this helpful? React 👍 or 👎 to let us know.

@Kitenite Kitenite merged commit 1f92961 into main Oct 6, 2025
7 of 8 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant